import Channel from '@/components/Channel';
import { useAppSelector } from '@/store';
import { getArticlesByIdAction } from '@/store/action/article';
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import ArticleList from './components';

export default function Home() {
  const { currentId, userList } = useAppSelector((state) => state.channel);
  const { articleData } = useAppSelector((state) => state.article);

  const { results = [] } = articleData[currentId] || {};

  const dispatch = useDispatch();
  useEffect(() => {
    if (!!results.length) return;
    dispatch(getArticlesByIdAction(currentId));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch, currentId]);
  return (
    <div>
      <Channel />
      {userList.map((item) => {
        return (
          <ArticleList
            key={item.id}
            channel_id={currentId}
            style={{ display: item.id === currentId ? 'block' : 'none' }}
          />
        );
      })}
    </div>
  );
}
